<template>
	<div class="md5">
		<table>
			<tr>
				<td class="td1"><span>加密字符</span></td>
				<td class="td2">
					<el-input v-model="encryptionStr" @input="encryptionMethod()" placeholder="请输入加密内容" size="small"></el-input>
				</td>
			</tr>
			<tr v-if="state">
				<td class="td1"><span>密钥</span></td>
				<td class="td2">
					<el-input v-model="secretKey" @input="encryptionMethod()" placeholder="请输入密钥" size="small"></el-input>
				</td>
			</tr>
			<tr>
				<td class="td1"><span>加密方式</span></td>
				<td class="td2">
					<el-radio-group v-model="md5Mode" size="mini" @change="encryptionMethod()">
						<el-radio-button label="hex_md5"></el-radio-button>
						<el-radio-button label="b64_md5"></el-radio-button>
						<el-radio-button label="hex_hmac_md5"></el-radio-button>
						<el-radio-button label="b64_hmac_md5"></el-radio-button>
					</el-radio-group>
				</td>
			</tr>
			<tr>
				<td class="td1"><span>加密结果</span></td>
				<td class="td2"><el-input v-model="result" class="result" placeholder="输出结果" readonly="readonly" size="small"></el-input></td>
			</tr>
		</table>
		<div class="tip">
			<div>提示：</div>
			<div>hex_md5：这个方法用于对字符串进行MD5计算，然后返回一个十六进制字符串表示的计算结果。</div>
			<div>b64_md5：这个方法也是用于对字符串进行MD5计算，但是返回的是一个Base64编码的结果字符串。</div>
			<div>hex_hmac_md5：这个方法用于对字符串使用一个秘钥进行HMAC-MD5计算，然后返回一个十六进制字符串表示的计算结果。</div>
			<div>b64_hmac_md5：这个方法也是对字符串使用一个秘钥进行HMAC-MD5计算，但是返回的是一个Base64编码的结果字符串。</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				encryptionStr: "",
				md5Mode: "hex_md5",
				result: "",
				secretKey:"",
				state:false,
			}
		},
		methods: {
			encryptionMethod(){
				if(this.md5Mode=="hex_md5"){
					this.state = false;
					this.result = hex_md5(this.encryptionStr);
				}else if(this.md5Mode=="b64_md5"){
					this.state = false;
					this.result = b64_md5(this.encryptionStr);
				}else if(this.md5Mode=="hex_hmac_md5"){
					this.state = true;
					this.result = hex_hmac_md5(this.encryptionStr, this.secretKey);
				}else if(this.md5Mode=="b64_hmac_md5"){
					this.state = true;
					this.result = b64_hmac_md5(this.encryptionStr, this.secretKey);
				}
			}
		},
	}
</script>

<style scoped>
	.md5 table{
		table-layout: fixed;
		font-size: 16px;
	}
	.md5 table tr td {
		height: 33px;
		text-align: left;
		word-wrap: break-word;
		word-break: break-all;
	}
	.md5 .tip {
		font-size: 16px;
		text-align: left;
	}
	.result >>> .el-input__inner{
		background-color: #e5e5e5;
	}
	
	@media screen and (min-width: 1200px){
		.td1{
			width: 110px;
		}
		.td2{
			width: 800px;
		}
	}
	@media screen and (max-width: 1200px){
		.td1{
			width: 110px;
		}		
		.td2{
			width: 450px;
		}
	}
	@media screen and (max-width: 767px){
		.td1{
			width: 75px;
		}
		.td2{
			width: 275px;
			font-size: 14px;
		}
	}
</style>
